<template>
  <div class="ql-editor">
    <h1>{{ row.title }}</h1>
    <el-divider/>
    <div class="tip">
      <span id="time">发布时间:{{ row.publishTime }}</span>
      <span>作者:{{ row.author }}</span>
    </div>
    <div v-html="row.content"></div>
  </div>
</template>

<script>
import {getView} from "@/api/blog/article";

export default {
  name: "view.vue",
  data() {
    return {
      row: {
        author: null,
        title: null,
        content: null,
        publishTime: null
      }
    }
  },
  created() {
    this.select()
  },
  methods: {
    select() {
      const id = Number(this.$route.params.id)
      getView(id).then(res => {
        console.log(res)
        this.row = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.ql-editor {
  text-align: center;

  h1 {
    color: #0d5dc9;
    font-size: 26px;
  }

  .tip {
    font-size: 12px;
    margin-bottom: 10px;
  }

  #time {
    margin-right: 10px;
  }
}
</style>
